CSS transform (1)

Kürzlich habe ich eine online CSS-Übungen, Daily CSS Images, begonnen. Der Teilnahmer sollte täglich eine Grafik oder Muster mittels CSS schaffen. Dabei finde ich, CSS transform-Property häufig benutzt. Deswegen beschließe ich mich diese Eigenschaft klar zu verstehen und gut zu nutzen.

Mit CSS transform kann man die Position, Größe und Form entsprechender Elementen ändern.

• transform:translate(): Bewegen
• transform:rotate(): Umdrehen
• transform:scale(): Skalieren
• transform:skew(): Verzerren

2D Translation

Das Element bewegt sich in Richtung X-Achse, wenn man translateX() benutzt. Mit translateY() in Richtung Y-Achse. Selbstverständlich wird die Bewegung in beiden Richtungen mittels translate(x, y) kontrolliert. Nicht nur positiver Pixelwert, sondern auch Prozentzahl(%) und negativer Pixelwert sind verfügbar für Translation.

.box1 {
  transform: translateX(-20px);
}
.box2 {
  transform: translateY(30%);
}
.box3 {
  transform: translate(10px, 25%);
}

Demo:

2D Rotation

Die Umdrehungswert erlaubt den Umfang von 0 bis 360 Grad(degrees). Mit einem possitiven Wert dreht das Element im Uhrzeigersinn, und negativen Wert gegen den Uhrzeigersinn.

.box1 {
  transform: rotate(-10deg);
}
.box2 {
  transform: rotate(30deg);
}

Demo:

Der Rechteck links dreht sich um 10 Grad gegen den Uhrzeigersinn um, während der rechte um 30 Grad im Uhrzeigersinn.

2D Scale

Mit Wert kleiner als 1 oder größer als 1 kann das Element jeweils verkleinert oder vergrößert. Skalierung erklaubt keine Prozentzahl und em-Wert. Bei Skalierung ermöglicht es auch die Verkleinerung und Vergrößerung nun in horizontaler oder nun in vertikaler Richtung.

.box1 {
  transform: scale(.6);
}
.box2 {
  transform: scale(1.2);
}
.box3 {
  transform: scaleX(1.4);
}
.box4 {
  transform: scaleY(0.7);
}
.box5 {
  transform: scale(1.6, 0.4);
}

Demo:

Der letzte Recheck zeigt die Skalierung verschiedener Proportion in horizontaler und vertikaler Richtung .

Über transform:skew() wird es nächst erklärt.